<template>
  <div>
    <el-row class="bgW">
      <el-col :span="18">
        <!--检索条件-->
        <el-form class="search" :inline="true" label-suffix="：" size="mini" :model="search">
          <el-form-item label="店铺名称">
            <el-select
              v-model="search.shopId"
              clearable
              remote
              filterable
              :remote-method="remoteShop"
              placeholder="请输入店铺名称"
              class="w200"
            >
              <el-option
                v-for="item in options.shop_id"
                :key="item.shopId"
                :label="item.shopName"
                :value="item.shopId"
              />
            </el-select>
          </el-form-item>
           <el-form-item label="日期">
            <!-- <el-date-picker
              v-model="search.start_time"
              type="date"
              class="w130"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker> -->
            <el-date-picker
              v-model="search.end_time"
              type="date"
              class="w130"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          
        </el-form>
      </el-col>
      <el-col :span="6" class="btnBox">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
        <el-button type="primary" class="mb10" size="mini" :loading="exportS" @click="exportExcel">导出数据</el-button>
      </el-col>
      </el-row>
    
    <div>
      <!--列表-->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            size="small"
			height="1500"
            border
            v-loading="loading"
            :span-method="objectSpanMethod"
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
          >
            <ElTableColumn label="姓名" prop="name" />
            <ElTableColumn label="级别" prop="gradeName" />
            <ElTableColumn label="项目名称" prop="goodsName" />
            <ElTableColumn :label="`${searchTime}日`" prop="thirdOneDay" />
            <ElTableColumn label="本月合计" prop="monthPayTotalPrice" />
            <ElTableColumn label="提成标准" prop="percentageStandard" />
            <ElTableColumn label="个人总业绩达成" prop="personAchieve" />
            <ElTableColumn label="本月提成" prop="monthPercentage" />
          </el-table>
          <!-- <pagination
            class="page tc mt10"
            :total="page.total"
            :page.sync="page.page"
            :limit.sync="page.limit"
            @pagination="getList"
          /> -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getLastDay } from '@/utils';
import { getShopList } from "@/api/shop";
import pagination from "@/components/Pagination";
import { handleExportExcel } from "@/vendor/handleExportExcel";
import { staffScore } from "@/api/statistics";
class Page {
  total = 0;
  page = 1;
  limit = 10;
}
class Search {
  shopId = "";
  start_time = "";
  end_time = "";
}
class Options {
  shop_id = [];
}
export default {
  name: "StaffResult",
  components: {
    pagination
  },
  data() {
    return {
      search: new Search(), // 检索条件
      options: new Options(), 
      page: new Page(), // 分页
      list: [], // 数据展示
      loading: false,
      exportS: false,
      searchTime:''
    };
  },
  mounted() {
     let year = new Date().getFullYear()
    let month = new Date().getMonth() + 1
    let day = new Date().getDate()
    
    if(month.toString().length == 1){
      month = '0'+ month
    }
    if(day.toString().length == 1){
      day = '0'+ day
    }
    this.search.end_time = year+'-'+ month + '-' + day
    this.searchTime = day
    this.getList('search');
  },
  computed: {
    tableData() {
      const res = this.list.reduce((res, item) => {
        item.maxnum = 0;
        if (item.goods && item.goods.length > 0) {
          const goods = item.goods.map(goods => Object.assign({}, item, goods));
          goods[0].maxnum = item.goods.length;
          res = res.concat(goods);
        } else {
          res.push(item);
        }
        return res;
      }, []);
      return res;
    }
  },
  methods: {
    getList(option) {
      this.loading = true
      if (option === "search") this.page = new Page();
      staffScore({ ...this.search,page:1, limit:1000000}).then(res => {
        let str = this.search.end_time.substring(this.search.end_time.length-2)
        let strF = str.substr(0, 1)
        this.searchTime =  strF == 0?this.search.end_time.substring(this.search.end_time.length-1):str;
        this.page.total = res.dataCount;
        this.list = res.list;
        this.loading = false
      });
    },
    remoteShop(e) {
      getShopList({ page: 1, limit: 100000, shopName: e }).then(res => {
        this.options.shop_id = res.list;
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        return {
          rowspan: row.maxnum,
          colspan: 1
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    },
    // 导出表格
    async exportExcel() {
      this.exportS = true
      const data= await staffScore({
        ...this.page
      });
      const list = []
       data.list.forEach((item) => {
        item.goods.forEach((val) => {
          val['name'] = item.name;
          val['positionName'] = item.positionName;
        list.push(val)
        });
      });
      handleExportExcel(
        [
          "姓名",
          "级别",
          "项目名称",
          this.search.end_time,
          "本月合计",
          "提成标准",
          "个人总业绩达成",
          "本月提成"
        ],
        [
          "name",
          "positionName",
          "goodsName",
          "thirdOneDay",
          "monthPayTotalPrice",
          "percentageStandard",
          "personAchieve",
          "monthPercentage"
        ],
        list,
        "员工业绩"
      );
      this.exportS = false
    }
  }
};
</script>

<style lang="scss" scoped>
.btnBox {
  text-align: right;
}
</style>
